Form Validation in a Vue 3 App with Vee-Validate 4 — Form Validation Rules

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

Rules with Multiple Parameters

We can have global validation rules with multiple parameters.

To define and use them, we write:

<template>
  <Form @submit="onSubmit">
    <Field name="number" as="input" rules="required|min:0,100" />
    <ErrorMessage name="number" />
    <br />

    <button>Submit</button>
  </Form>
</template>

<script>
import { Form, Field, ErrorMessage, defineRule } from "vee-validate";

defineRule("required", (value) => {
  if (!value || !value.length) {
    return "This field is required";
  }
  return true;
});

defineRule("min", (value, [min, max]) => {
  if (!value || !value.length) {
    return true;
  }
  const numericValue = +value;
  if (numericValue < min) {
    return `This field must be greater than ${min}`;
  }
  if (numericValue > max) {
    return `This field must be less than ${max}`;
  }
  return true;
});

export default {
  components: {
    Form,
    Field,
    ErrorMessage,
  },
  data() {},
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

We define the min rule with the min and max parameters.

And we check against them to return the right validation result.

true means the value is valid.

Otherwise, we return an error message string.

Then in the rules prop, we combine the required rule with the min rule.

Schema Validation

We can add the rules to the validation schema.

For example, we can write:

<template>
  <Form @submit="submit" :validation-schema="schema" v-slot="{ errors }">
    <Field name="email" as="input" />
    <span>{{ errors.email }}</span>
    <br />

    <Field name="password" as="input" type="password" />
    <span>{{ errors.password }}</span>
    <br />

    <button>Submit</button>
  </Form>
</template>

<script>
import { Form, Field, defineRule } from "vee-validate";

defineRule("required", (value) => {
  if (!value || !value.length) {
    return "This field is required";
  }
  return true;
});

defineRule("email", (value) => {
  if (!value || !value.length) {
    return true;
  }
  if (!/[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}/.test(value)) {
    return "This field must be a valid email";
  }
  return true;
});

defineRule("minLength", (value, [limit]) => {
  if (!value || !value.length) {
    return true;
  }
  if (value.length < limit) {
    return `This field must be at least ${limit} characters`;
  }
  return true;
});

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = {
      email: "required|email",
      password: "required|minLength:8",
    };

    return {
      schema,
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

We defined the required , email , and minLength rules.

Then we put them all in the schema object.

Then we set the validation-schema prop to the schema reactive property.

And then we display the error messages by getting the errors object from the slot props of the Form component.

Now when we use the form, the validation rules will be used to validate the form.

Conclusion

We can validate more complex forms with in our Vue 3 app with Vee-Validate 4.